<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="renderer" content="webkit">
    <title>{$eyou.field.seo_title} </title>
    <meta name="keywords" content="{$eyou.field.seo_keywords}"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="description" content="{$eyou.field.seo_description}">
    <meta name="baidu-site-verification" content="6F5CiPIRrB" />
    <meta name="author" content="">

    {eyou:static file="skin/css/bootstrap.min.css" /}
    {eyou:static file="skin/css/main.css" /}
    {eyou:static file="skin/css/style.css" /}
    {eyou:static file="skin/css/animate.min.css" /}
    {eyou:static file="skin/css/swiper-4.2.2.min.css" /}

</head>


<body class="bg-gray">
<!-- 头部模块-开始 -->
{eyou:include file="header.htm" /}
<!-- 头部模块-结束 -->
<style>
    .breadcrumb {
        display: inline-block;
        margin-left: 10px;
        font-size: 16px;
        color: #997542;
    }
</style>
<div class="container-fluid page-padding-top">
    <div class="product">
        <ol class="breadcrumb">
            {eyou:position style="breadcrumb" /}
        </ol>

        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <div class="swiper-container product-banner-swiper-model">
                    <div class="swiper-wrapper">
                        {eyou:volist name="$eyou.field.image_list"}
                        <div class="swiper-slide animated fadeIn" style="background-image: url('')">
                            <div class="swiper-banner">
                                <img src="{$field.image_url}" alt="">
                            </div>
                            <div class="container"></div>
                        </div>
                        {/eyou:volist}
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <div class="comtent">
                    <h1 class="title">{$eyou.field.title}</h1>
                    <p class="price">{$eyou.field.price}</p>
                    <hr>
                    <p class="text">品名：{$eyou.field.p_name}</p>
                    <p class="text">系列：{$eyou.field.series}</p>
                    <p class="text">配料：{$eyou.field.ingredients}</p>
                    <p class="text">规格：{$eyou.field.spec}</p>
                    <p class="text">产地：{$eyou.field.home}</p>
                    <p class="text">贮存条件：{$eyou.field.condition}</p>
                    <hr>
                    {eyou:notempty name='$eyou.field.tmall_url' /}
                    <a href="{$eyou.field.tmall_url}">
                        <button class="btn btn-warning btn-buy"> 天猫商城</button>
                    </a>
                    {/eyou:notempty}
                </div>
            </div>
        </div>
    </div>
</div>
{eyou:if condition="($eyou.field.content != '')"}
<style>
    .gk img{
        width: 100%;
    }
</style>
<div class="container">
    <div class="product-detail">
        <h1 class="text-center">产品概览</h1>
        <div class='gk' style="width: 100%;">
            {$eyou.field.content}
        </div>

    </div>
</div>
{/eyou:if}
<!-- 模块-开始 -->
{eyou:include file="footer.htm" /}
<!-- 模块-结束 -->
{eyou:static file="skin/js/jquery-3.3.1.min.js" /}
{eyou:static file="skin/js/bootstrap.min.js" /}
{eyou:static file="skin/js/script.js" /}
{eyou:static file="skin/js/swiper-4.2.2.min.js" /}

</body>
<script>
    var swiperBanner = new Swiper('.product-banner-swiper-model', {
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        autoplay: {
            delay: 3500,
            disableOnInteraction: false,
        },
        speed: 800,
        loop: true,
    });
</script>
<script>
    $(function () {
        var s = $(".breadcrumb").html().substring(0, $(".breadcrumb").html().length - 15);
        s = s + '<a href="{$jumpUrl}" class="breadcrumb">{$typename}</a>';
        $(".breadcrumb").html(s);
    });

</script>
</html>